<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div id="app">
      <h3>姓名</h3>
      <p>{{name}}</p>
      <h3>年龄</h3>
      <p>{{age}}</p>
    </div>
  </body>
</html>
<script>
  document.addEventListener(
    "DOMContentLoaded",
    function () {
      let opt = { el: "#app", data: { name: "vance", age: 30 } };
      let vm = new Vue(opt);
      setTimeout(() => {
        opt.data.name = "董昌伟";
      }, 2000);
    },
    false
  );
  class Vue {
    constructor(opt) {
      this.opt = opt;
      this.observe(opt.data);
      let root = document.querySelector(opt.el);
      this.compile(root);
    }
    // 为响应式对象 data 里的每一个 key 绑定一个观察者对象
    observe(data) {
      Object.keys(data).forEach((key) => {
        let obv = new Observer();
        data["_" + key] = data[key];
        // 通过 getter setter 暴露 for 循环中作用域下的 obv，闭包产生
        Object.defineProperty(data, key, {
          get() {
            Observer.target && obv.addSubNode(Observer.target);
            return data["_" + key];
          },
          set(newVal) {
            obv.update(newVal);
            data["_" + key] = newVal;
          },
        });
      });
    }
    // 初始化页面，遍历 DOM，收集每一个key变化时，随之调整的位置，以观察者方法存放起来
    compile(node) {
      [].forEach.call(node.childNodes, (child) => {
        if (!child.firstElementChild && /\{\{(.*)\}\}/.test(child.innerHTML)) {
          let key = RegExp.$1.trim();
          child.innerHTML = child.innerHTML.replace(
            new RegExp("\\{\\{\\s*" + key + "\\s*\\}\\}", "gm"),
            this.opt.data[key]
          );
          Observer.target = child;
          this.opt.data[key];
          Observer.target = null;
        } else if (child.firstElementChild) this.compile(child);
      });
    }
  }
  // 常规观察者类
  class Observer {
    constructor() {
      this.subNode = [];
    }
    addSubNode(node) {
      this.subNode.push(node);
    }
    update(newVal) {
      this.subNode.forEach((node) => {
        node.innerHTML = newVal;
      });
    }
  }

  // script 宏任务：promise start -> async1 ->script start->script end->
  // promise 微任务：promise end->promise then start->async2 ->promise then end ->
  // 定时器宏任务：setTimeout1 start -> async3 ->setTimeout1 end -> setTimeout2 start -> async3->
  // setTimeout2 end ->setTimeout3 start ->async3 ->setTimeout3 end
  // script 的定时器1第一个入队，promise 函数体内定时器2 第二个入队，promise.then 定时器3最后入队。
  // async function async1() {
  //   console.log("async1");
  // }

  // async function async2() {
  //   console.log("async2");
  // }

  // async function async3() {
  //   console.log("async3");
  // }

  // new Promise(async (resolve, reject) => {
  //   console.log("promise start");
  //   await async1();
  //   setTimeout(async () => {
  //     console.log("setTimeout2 start");
  //     await async3();
  //     console.log("setTimeout2 end");
  //   });
  //   console.log("promise end");

  //   resolve();
  // }).then(async () => {
  //   console.log("promise then start");
  //   await async2();
  //   setTimeout(async () => {
  //     console.log("setTimeout3 start");
  //     await async3();
  //     console.log("setTimeout3 end");
  //   });
  //   console.log("promise then end");
  // });
  // console.log("script start");
  // setTimeout(async () => {
  //   console.log("setTimeout1 start");
  //   await async3();
  //   console.log("setTimeout1 end");
  // });
  // console.log("script end");
</script>
